<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../lib/jquery-1.11.1.min.js"></script>
<style>
body {
	text-align: center;
	background-color: rgba(1, 63, 75, 0.95);
	padding: 20px;
}

.div {
	margin: 0 auto;
}

#content {
	margin: 100px auto;
}

#uploadFile {
	margin: 100px auto;
}
</style>
</head>
<body>
	<div>
		<form id="uploadFile" enctype="multipart/form-data">
			<input type="file" name="files" style="display: none;" onchange="javascript:$('input[name=\'fileName\']').val(this.files[0].name);" />
			<input name="fileName" value="No files selected" readonly /> 
			<input type="button" value="Select File" onclick="javascript:$('input[name=\'files\']').click();" /> 
			<input type="button" id="submit" value=" Submit" />
		</form>
		<input value="Enter url please" id="uri"/> 
		<input type="button" id="htmlSubmit" value="GET SUMMARY" />
	</div>

	<div>
		<textarea rows="20" cols="190" id="content"></textarea>
	</div>
</body>
<script>
	$("#submit").on("click", function() {
		$("#content").text("Analyzing the article for a summary......");
		var formData = new FormData($("#uploadFile")[0]);
		$.ajax({
			type : "POST",
			contentType : false,
			processData : false,
			 url : "/nlp_war_exploded/controller/uploadFile",
			dataType: "json",
			data : formData,
			async : true,
			cache : false,
			error : function(request) {
				console.log(request);
				$("#content").text("");
				alert("there was an error");
			},
			success : function(data) {
				$("#content").text("");
				//jsonData = $.parseJSON(data);
				if (data.data) {
					$("#content").text(data.data.result);
				} else {
					alert(data.message);
				}
			}
		});

	});
	
	
	$("#htmlSubmit").on("click", function() {
		var uri = $("#uri").val();
		var content;
		if(uri!="uri"){
			$("#content").text("Analyzing the article for a summary......");
		}
		$.ajax({
			type : "get",
			url : "/nlp_war_exploded/controller/htmlSummary?uri="+uri,
			dataType: 'json',
			contentType : 'application/json;charset=utf-8',
			async : true,
			cache : false,
			error : function(request) {
				$("#content").text("");
				alert("there was an error");
			},
			success : function(data) {
				$("#content").text("");
				var content;
				 for (var key in data) {
					if(!content){
						content = key + "\r\n";
					}else{
						content = content + "\r\n" + key + "\r\n";
					}
					summaryData = data[key];
					var res;
					for (var key in summaryData) {
						summary = $.parseJSON(summaryData[key]);
						if(!summary.data){
							res = summary.message;
						}else{
							res = summary.data.result;
						}
						content = content  + "\r\n"  + key  + ":\r\n"  + res  + "\r\n" ;
					}
				} 
				 /* content = content.replace(/< BR\/>/g,"\r\n"); */
				$("#content").text(content);
			}
		});

	});
</script>
</html>